<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />

    <r-table
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="pagination"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />

    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="100px"
      dialogWidth="500px"
      :isHandle="true"
    />
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      searchData: {
        orderNo: "",
        carNo: "",
        carName: "",
        phone: "",
        nickName: "",
        ctime: "",
        etime: ""
      },
      searchForm: [
        {
          type: "input",
          placeholder: "Order Nnumber",
          prop: "orderNo",
          width: 250
        },
        { type: "input", placeholder: "CarNumber", prop: "carNo", width: 220 },
        { type: "input", placeholder: "CarName", prop: "carName", width: 220 },
        { type: "input", placeholder: "Phone", prop: "phone", width: 220 },
        {
          type: "input",
          placeholder: "User Nickname",
          prop: "nickName",
          width: 240
        },
        {
          type: "date",
          placeholder: "Start Time",
          prop: "ctime",
          width: 220,
          change: val => {
            this.searchData.ctime = val;
          }
        },
        {
          type: "date",
          placeholder: "End Time",
          prop: "etime",
          width: 220,
          change: val => {
            this.searchData.etime = val;
          }
        }
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => {
            this.zeroFn();
            this.getData();
          }
        },
        {
          label: "Reset",
          buttonss: true,
          icon: "el-icon-refresh-right",
          handle: e => {
            this.searchData = {
              orderNo: "",
              deviceNo: "",
              phone: "",
              beginTime: "",
              endTime: "",
              newBatteryNo: ""
            };
            this.zeroFn();
            this.getData();
          }
        }
      ],
      tableLoading: false,
      tableData: [{}],
      tableCols: [
        { label: "Order Nnumber", prop: "orderNo" },
        { label: "CarNumber", prop: "carNo" },
        { label: "CarName", prop: "carName" },
        { label: "User Nickname", prop: "nickName" },
        { label: "Phone", prop: "phone" },
        { label: "Remarks", prop: "remark" },
        {
          label: "Order Status",
          prop: "status",
          itemClass: e =>
            e.status == 0 ? "danger" : e.status == 1 ? "success" : "",
          formatter: e =>
            e.status == 0 ? "Rent" : e.status == 1 ? "已Return" : "--"
        },
        { label: "Start Time", prop: "ctime" },
        { label: "End Time", prop: "etime" },
        {
          label: "Operations",
          type: "button",
          width: 260,
          btnList: [
            {
              label: "End Order",
              type: "primary",
              plain: true,
              size: "small",
              handle: row => {
                this.$confirm("Confirm End Order?", "Hint", {
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  type: "warning"
                })
                  .then(async () => {
                    const res = await this.apis.carOrderEndOrder(row.id);
                    this.$message({
                      type: "success",
                      message: "Operations Success!"
                    });
                  })
                  .catch(() => {});
              }
            }
          ]
        }
      ],
      tableHandles: [
        {
          label: "Battery Swap Orders Export",
          type: "primary",
          icon: "el-icon-download",
          titles:
            "The order can be filtered out according to the order number, CarNumber, CarName, Phone, User Nickname, Start Time, end time, and then exported. The order can also be directly ExportWhole without selecting",
          plain: true,
          loading: false,
          handle: async e => {
            const res = await this.apis.carOrderExport(this.searchData);
            console.log(333, this.searchData, res.msg);
            this.$message({
              type: res.code == 200 ? "success" : "error",
              message: res.code == 200 ? "success" : "error"
            });
            location.href = process.env.VUE_APP_URL + res.msg;
          }
        }
      ],
      pagination: { limit: 10, offset: 1, total: 0 },
      formRules: {},
      formHandle: [],
      formCols: [],
      formData: {}
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    zeroFn() {
      this.pagination.limit = 10;
      this.pagination.offset = 1;
      this.pagination.total = 0;
    },
    async getData() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.pagination.offset,
          pageSize: this.pagination.limit
        }
      };
      var res = await this.apis.carOrderList(parm);
      // console.log(res);
      var list = res.rows || [];

      this.tableData = list;
      this.pagination.total = res.total;
    },
    page() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss"></style>
